<template>
  <div v-if="visible" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md mx-4 overflow-hidden">
      <div :class="['px-6 py-4 text-white', success ? 'bg-emerald-600' : 'bg-red-600']">
        <h3 class="text-lg font-medium">{{ title }}</h3>
      </div>
      <div class="px-6 py-4">
        <p class="text-gray-700">{{ message }}</p>
      </div>
      <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
        <button
          type="button"
          @click="closeModal"
          class="px-4 py-2 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2"
          :class="success ? 'bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500' : 'bg-red-600 hover:bg-red-700 focus:ring-red-500'"
        >
          {{ success ? '确认' : '关闭' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  message: {
    type: String,
    required: true,
  },
  success: { // 新增 success prop，用于区分成功和失败状态
    type: Boolean,
    default: true, // 默认为成功状态
  },
});

const emit = defineEmits(['close']);

function closeModal() {
  emit('close');
}
</script>

<style scoped>
/* 你可以在这里添加额外的组件内样式 */
</style> 